<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情 - 企业门户网站</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- 自定义CSS -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-building"></i> 企业名称
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="products.html">产品中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="news.html">新闻中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">联系我们</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="搜索...">
                    <button class="btn btn-outline-light" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <header class="bg-light py-5 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">首页</a></li>
                            <li class="breadcrumb-item"><a href="products.html">产品中心</a></li>
                            <li class="breadcrumb-item active" aria-current="page">产品详情</li>
                        </ol>
                    </nav>
                    <h1 class="display-4">产品名称</h1>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container my-5">
        <div class="row">
            <!-- 产品图片 -->
            <div class="col-lg-6 mb-4">
                <div class="card">
                    <img src="https://placehold.co/800x600" class="card-img-top" alt="产品图片">
                    <div class="card-body p-0">
                        <div class="row g-0">
                            <div class="col-3">
                                <img src="https://placehold.co/200x150" class="img-thumbnail border-0 rounded-0"
                                    alt="产品缩略图1">
                            </div>
                            <div class="col-3">
                                <img src="https://placehold.co/200x150" class="img-thumbnail border-0 rounded-0"
                                    alt="产品缩略图2">
                            </div>
                            <div class="col-3">
                                <img src="https://placehold.co/200x150" class="img-thumbnail border-0 rounded-0"
                                    alt="产品缩略图3">
                            </div>
                            <div class="col-3">
                                <img src="https://placehold.co/200x150" class="img-thumbnail border-0 rounded-0"
                                    alt="产品缩略图4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 产品信息 -->
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h2 class="card-title">产品名称</h2>
                        <div class="d-flex align-items-center mb-3">
                            <span class="badge bg-primary me-2">产品类别</span>
                            <div class="text-warning">
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-fill"></i>
                                <i class="bi bi-star-half"></i>
                                <span class="text-muted ms-2">4.5 (28 评价)</span>
                            </div>
                        </div>
                        <h3 class="text-danger mb-4">¥1,299.00</h3>
                        <p class="card-text">产品详细描述，详细介绍产品的特点、功能和优势。这是一个高质量的产品，采用先进的技术和材料制造，具有卓越的性能和耐用性。</p>

                        <div class="mb-4">
                            <h5>产品特点</h5>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item px-0"><i
                                        class="bi bi-check-circle-fill text-success me-2"></i> 特点一：高性能</li>
                                <li class="list-group-item px-0"><i
                                        class="bi bi-check-circle-fill text-success me-2"></i> 特点二：节能环保</li>
                                <li class="list-group-item px-0"><i
                                        class="bi bi-check-circle-fill text-success me-2"></i> 特点三：易于操作</li>
                                <li class="list-group-item px-0"><i
                                        class="bi bi-check-circle-fill text-success me-2"></i> 特点四：长寿命</li>
                            </ul>
                        </div>

                        <div class="mb-4">
                            <h5>规格参数</h5>
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th scope="row">型号</th>
                                        <td>XYZ-2023</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">尺寸</th>
                                        <td>1200mm × 800mm × 600mm</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">重量</th>
                                        <td>150kg</td>
                                    </tr>
                                    <tr>
                                        <th scope="row">功率</th>
                                        <td>220V/50Hz, 1500W</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex align-items-center mb-4">
                            <div class="me-3">
                                <label for="quantity" class="form-label">数量</label>
                                <input type="number" class="form-control" id="quantity" value="1" min="1"
                                    style="width: 80px;">
                            </div>
                            <button class="btn btn-primary btn-lg mt-3">
                                <i class="bi bi-cart-plus me-2"></i>加入询价单
                            </button>
                        </div>

                        <div class="d-flex">
                            <button class="btn btn-outline-secondary me-2">
                                <i class="bi bi-heart"></i> 收藏
                            </button>
                            <button class="btn btn-outline-secondary">
                                <i class="bi bi-share"></i> 分享
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品详情选项卡 -->
        <div class="row">
            <div class="col-12">
                <ul class="nav nav-tabs" id="productDetailTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="description-tab" data-bs-toggle="tab"
                            data-bs-target="#description" type="button" role="tab">产品描述</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="specifications-tab" data-bs-toggle="tab"
                            data-bs-target="#specifications" type="button" role="tab">技术规格</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews"
                            type="button" role="tab">客户评价</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="faq-tab" data-bs-toggle="tab" data-bs-target="#faq" type="button"
                            role="tab">常见问题</button>
                    </li>
                </ul>
                <div class="tab-content p-4 border border-top-0 rounded-bottom" id="productDetailTabsContent">
                    <div class="tab-pane fade show active" id="description" role="tabpanel">
                        <h4>产品详细介绍</h4>
                        <p>这里是产品的详细介绍内容。详细介绍产品的设计理念、功能特点、使用场景等。</p>
                        <p>产品采用先进的技术和高质量的材料制造，具有以下优势：</p>
                        <ul>
                            <li>优势一：高性能，能够满足各种复杂需求</li>
                            <li>优势二：节能环保，符合国家环保标准</li>
                            <li>优势三：操作简便，用户友好界面</li>
                            <li>优势四：维护方便，降低使用成本</li>
                        </ul>
                        <img src="https://placehold.co/800x400" alt="产品细节" class="img-fluid my-3">
                        <p>产品广泛应用于[行业领域]，在[具体应用场景]中表现尤为突出。我们的产品已经成功应用于多个知名项目，获得了客户的一致好评。</p>
                    </div>
                    <div class="tab-pane fade" id="specifications" role="tabpanel">
                        <h4>详细技术规格</h4>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>项目</th>
                                    <th>参数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>型号</td>
                                    <td>XYZ-2023</td>
                                </tr>
                                <tr>
                                    <td>尺寸</td>
                                    <td>1200mm × 800mm × 600mm</td>
                                </tr>
                                <tr>
                                    <td>重量</td>
                                    <td>150kg</td>
                                </tr>
                                <tr>
                                    <td>功率</td>
                                    <td>220V/50Hz, 1500W</td>
                                </tr>
                                <tr>
                                    <td>工作温度</td>
                                    <td>-10°C ~ 50°C</td>
                                </tr>
                                <tr>
                                    <td>噪音等级</td>
                                    <td>
                                        <65dB< /td>
                                </tr>
                                <tr>
                                    <td>生产效率</td>
                                    <td>200件/小时</td>
                                </tr>
                                <tr>
                                    <td>保修期</td>
                                    <td>3年</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane fade" id="reviews" role="tabpanel">
                        <h4>客户评价</h4>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-3">
                                            <h5 class="card-title mb-0">张先生</h5>
                                            <div class="text-warning">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                            </div>
                                        </div>
                                        <p class="card-text">产品质量非常好，使用效果超出预期，售后服务也很到位。</p>
                                        <small class="text-muted">2023-05-10</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-3">
                                            <h5 class="card-title mb-0">李女士</h5>
                                            <div class="text-warning">
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-fill"></i>
                                                <i class="bi bi-star-half"></i>
                                            </div>
                                        </div>
                                        <p class="card-text">性价比很高，操作简单，适合我们这种中小企业使用。</p>
                                        <small class="text-muted">2023-04-22</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <h5>发表评价</h5>
                            <form>
                                <div class="mb-3">
                                    <label for="reviewRating" class="form-label">评分</label>
                                    <select class="form-select" id="reviewRating">
                                        <option value="5">5星 - 非常好</option>
                                        <option value="4">4星 - 好</option>
                                        <option value="3">3星 - 一般</option>
                                        <option value="2">2星 - 差</option>
                                        <option value="1">1星 - 非常差</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="reviewContent" class="form-label">评价内容</label>
                                    <textarea class="form-control" id="reviewContent" rows="3"></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">提交评价</button>
                            </form>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="faq" role="tabpanel">
                        <h4>常见问题</h4>
                        <div class="accordion" id="faqAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq1">
                                        问题一：产品如何安装？
                                    </button>
                                </h2>
                                <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p>产品安装非常简单，我们提供详细的安装手册和视频教程。如有需要，我们也可以提供专业的安装服务。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq2">
                                        问题二：保修政策是怎样的？
                                    </button>
                                </h2>
                                <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p>本产品提供3年质保服务，质保期内非人为损坏免费维修。质保期外我们提供有偿维修服务。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#faq3">
                                        问题三：如何联系售后服务？
                                    </button>
                                </h2>
                                <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                    <div class="accordion-body">
                                        <p>您可以拨打我们的售后服务热线：400-123-4567，或者通过官网在线客服联系我们。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 相关产品 -->
        <section class="mt-5">
            <h3 class="mb-4">相关产品</h3>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100">
                        <img src="https://placehold.co/400x300" class="card-img-top" alt="相关产品1">
                        <div class="card-body">
                            <h5 class="card-title">相关产品1</h5>
                            <p class="card-text">产品简要描述，介绍产品的主要特点和优势。</p>
                        </div>
                        <div class="card-footer bg-transparent">
                            <a href="product-detail.html" class="btn btn-sm btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100">
                        <img src="https://placehold.co/400x300" class="card-img-top" alt="相关产品2">
                        <div class="card-body">
                            <h5 class="card-title">相关产品2</h5>
                            <p class="card-text">产品简要描述，介绍产品的主要特点和优势。</p>
                        </div>
                        <div class="card-footer bg-transparent">
                            <a href="product-detail.html" class="btn btn-sm btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100">
                        <img src="https://placehold.co/400x300" class="card-img-top" alt="相关产品3">
                        <div class="card-body">
                            <h5 class="card-title">相关产品3</h5>
                            <p class="card-text">产品简要描述，介绍产品的主要特点和优势。</p>
                        </div>
                        <div class="card-footer bg-transparent">
                            <a href="product-detail.html" class="btn btn-sm btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4 mb-md-0">
                    <h5>关于我们</h5>
                    <p>企业简介文字，介绍企业的基本情况、主营业务和发展方向。</p>
                    <div class="social-icons">
                        <a href="#" class="text-white me-2"><i class="bi bi-facebook"></i></a>
                        <a href="#" class="text-white me-2"><i class="bi bi-twitter"></i></a>
                        <a href="#" class="text-white me-2"><i class="bi bi-linkedin"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-4 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="index.html" class="text-white">首页</a></li>
                        <li><a href="about.html" class="text-white">关于我们</a></li>
                        <li><a href="products.html" class="text-white">产品中心</a></li>
                        <li><a href="news.html" class="text-white">新闻中心</a></li>
                        <li><a href="contact.html" class="text-white">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-3 mb-4 mb-md-0">
                    <h5>联系方式</h5>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-geo-alt me-2"></i> 北京市朝阳区某某路123号</li>
                        <li><i class="bi bi-telephone me-2"></i> 010-12345678</li>
                        <li><i class="bi bi-envelope me-2"></i> info@company.com</li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h5>订阅我们</h5>
                    <p>订阅我们的新闻通讯，获取最新产品信息和行业动态。</p>
                    <form>
                        <div class="input-group mb-3">
                            <input type="email" class="form-control" placeholder="您的邮箱">
                            <button class="btn btn-primary" type="button">订阅</button>
                        </div>
                    </form>
                </div>
            </div>
            <hr class="my-4">
            <div class="row">
                <div class="col-md-6 text-center text-md-start">
                    <p class="mb-0">&copy; 2023 企业名称. 保留所有权利.</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <p class="mb-0">
                        <a href="#" class="text-white me-3">隐私政策</a>
                        <a href="#" class="text-white">使用条款</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS 和依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义JS -->
    <script src="js/script.js"></script>
</body>

</html>